<template>
  <a-layout has-sider>
    <a-layout-sider style="width: 512px; background-color: whitesmoke">
      <a-list item-layout="horizontal" :data-source="listUserInfo">
        <template #renderItem="{ item }">
          <a-list-item
            class="ListItem"
            :class="{ active: item.selected }"
            @click="selectItem(item)"
          >
            <a-avatar style="background-color: #87d068">
              <template #icon>
                <UserOutlined />
              </template>
            </a-avatar>
            {{ item.uname }}
          </a-list-item>
        </template>
      </a-list>
    </a-layout-sider>
    <a-layout-content>
      <a-list
        item-layout="horizontal"
        :data-source="listUserMessage"
        style="overflow: auto; background-color: white"
      >
        <template #renderItem="{ item }">
          <a-list-item class="ListItem">
            <a-flex v-if="item.sender != uid">
              <p style="max-width: 400px">
                <span style="color: gray; font-size: smaller">{{
                  item.sendTs
                }}</span>
                <br />
                <span class="ReceivedMessage">{{ item.content }}</span>
              </p>
            </a-flex>
            <a-flex v-else justify="flex-end" style="width: 100%">
              <p style="max-width: 400px">
                <span style="color: gray; font-size: smaller">{{
                  item.sendTs
                }}</span>
                <br />
                <span class="MyMessage">{{ item.content }}</span>
              </p>
            </a-flex>
          </a-list-item>
        </template>
      </a-list>
    </a-layout-content>
  </a-layout>
  <a-flex style="position: absolute; right: 4px; bottom: 4px">
    <a-input
      v-model:value="state.content"
      :placeholder="$t('234')"
      style="width: 400px"
    />
    &nbsp;&nbsp;
    <a-button type="primary" @click="sendMessage" :disabled="!canSend">{{
      $t("235")
    }}</a-button>
  </a-flex>
</template>
<script setup>
import { reactive, computed, onMounted } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { UserOutlined } from "@ant-design/icons-vue";
import Utils from "@/component/Utils";

const state = reactive({
  receiver: 0,
  content: "",
});
const listMessage = [];
const listUserInfo = reactive([]);
const listUserMessage = reactive([]);

const canSend = computed(() => {
  return state.content.length > 0 && state.content.trim().length > 0;
});

const uid = computed(() => {
  return localStorage.getItem("uid");
});

const loadMessages = () => {
  listMessage.splice(0, listMessage.length);
  listUserInfo.splice(0, listUserInfo.length);
  listUserMessage.splice(0, listUserMessage.length);
  CommonDefine.apiGetArm("/api/v1/user/message/", (d) => {
    d.forEach((item) => {
      listMessage.push(item);
      let otherUserId = -1;
      if (item.receiver == uid.value) {
        otherUserId = item.sender;
      } else {
        otherUserId = item.receiver;
      }
      let userName = Utils.getUserName(otherUserId);
      let user = {
        uid: otherUserId,
        uname: userName,
        ts: item.sendTs,
        selected: false,
      };
      if (listUserInfo.find((u) => u.uid == user.uid) == undefined) {
        listUserInfo.push(user);
      }
    });
  });
};

const selectItem = (item) => {
  listUserInfo.forEach((u) => (u.selected = false));
  item.selected = true;
  state.receiver = item.uid;
  CommonDefine.apiPostArm(
    "/api/v1/user/read-message",
    { uid: item.uid },
    (d) => {
      listUserMessage.splice(0, listUserMessage.length);
      listMessage
        .filter((msg) => msg.sender == item.uid || msg.receiver == item.uid)
        .forEach((msg) => {
          msg.readTs = Date.now();
          listUserMessage.push(msg);
        });
    }
  );
};

const sendMessage = () => {
  CommonDefine.apiPostArm("/api/v1/user/send-message", state, (d) => {
    listMessage.push(d);
    listUserMessage.push(d);
  });
};

onMounted(() => {
  loadMessages();
});
</script>
<style>
.ReceivedMessage {
  padding: 4px;
  display: block;
  word-wrap: break-word;
  background-color: white;
}

.MyMessage {
  padding: 4px;
  display: block;
  word-wrap: break-word;
  background-color: rgb(200, 240, 255);
}
</style>
